<template>
  <div class="container">
    <!-- 新闻图片详情 -->
    <div v-if="type == 1 ? true : false">
      <div class="header">
        <span class="iconfont iconjiantou2" @click="$router.go(-1)"></span>
        <span class="iconfont iconnew"></span>
        <span
          class="follow"
          @click="follow(data.user.id)"
          :class="data.has_follow ? 'unfollow' : ''"
          >{{ data.has_follow ? "已关注" : "关注" }}</span
        >
      </div>
      <div class="article">
        <div class="title">{{ data.title }}</div>
        <div class="info">
          <span></span>
          <span>2020-11-27</span>
        </div>
        <div class="content" v-html="data.content"></div>
      </div>
    </div>
    <!-- 视频新闻详情 -->
    <div class="videoDetails" v-if="type == 2 ? true : false">
      <div class="header">
        <span class="iconfont iconjiantou2" @click="$router.go(-1)"></span>
        <span class="iconfont iconnew"></span>
      </div>
      <div class="video">
        <video ref="video" controls :src="data.content"></video>
        <div class="masking">
          <span id="shipin" ref="abc" class="iconfont iconshipin"></span>
        </div>
      </div>
      <div class="info">
        <div class="userIcon">
          <img
            class="userimg"
            v-if="!data.user.head_img"
            src="../assets/img/男头像.png"
            alt=""
          />
          <img
            v-if="data.user.head_img"
            :src="$axios.defaults.baseURL + data.user.head_img"
            alt=""
          />
        </div>
        <div class="user">{{ data.user.nickname }}</div>
        <div
          class="follow"
          @click="follow(data.user.id)"
          :class="data.has_follow ? 'unfollow' : ''"
        >
          {{ data.has_follow ? "已关注" : "关注" }}
        </div>
      </div>
      <div class="title">{{ data.title }}</div>
    </div>
    <!-- 点赞 -->
    <div class="dianzan">
      <span @click="dianzan" :class="data.has_like ? 'zan' : ''"
        ><span class="iconfont icondianzan"></span>{{ data.like_length }}</span
      >
      <span>
        <span class="iconfont iconweixin"></span>
        微信
      </span>
    </div>
    <!-- 精彩评论 -->
    <div class="comment">
      <div class="title">精彩跟帖</div>
      <mainComment
        v-for="(commentData, index) in commentList"
        :key="index"
        :commentData="commentData"
      />
      <div class="bottom">
        <div
          class="more"
          @click="$router.push('/goodcomment/' + $route.params.id)"
        >
          更多评论>>
        </div>
      </div>
    </div>
    <!-- 回复 -->
    <Reply @reloadComment="reloadComment" />
  </div>
</template>

<script>
import { commentList } from "@/api/myComment";
import mainComment from "../components/comment/main";
import Reply from "../components/Reply";
export default {
  components: {
    mainComment,
    Reply,
  },
  data() {
    return {
      type: 1,
      data: "",
      commentList: [],
    };
  },
  methods: {
    reloadComment() {
      commentList(this.$route.params.id).then((res) => {
        console.log(res);
        if (res.data.data.length >= 3) {
          res.data.data.length = 3;
          this.commentList = res.data.data;
        } else {
          this.commentList = res.data.data;
        }
        // this.commentList = res.data.data;
      });
    },
    loadArticle() {
      this.$axios({
        url: "/post/" + this.$route.params.id,
        method: "get",
        headers: {
          Authorization: localStorage.getItem("token"),
        },
      }).then((res) => {
        // console.log(res);
        this.type = res.data.data.type;
        this.data = res.data.data;
        //   console.log(this.data);
      });
    },
    follow(id) {
      console.log(id);
      console.log(this.data);
      if (!this.data.has_follow) {
        this.$axios({
          url: "/user_follows/" + id,
          method: "get",
          headers: {
            Authorization: localStorage.getItem("token"),
          },
        }).then((res) => {
          console.log(res);
          if (res.data.message === "关注成功") {
            this.loadArticle;
            this.data.has_follow = true;
          }
        });
      } else {
        this.$axios({
          url: "/user_unfollow/" + id,
          method: "get",
          headers: {
            Authorization: localStorage.getItem("token"),
          },
        }).then((res) => {
          console.log(res);
          this.data.has_follow = false;
        });
      }
    },
    dianzan() {
      this.$axios({
        url: "/post_like/" + this.data.id,
        method: "get",
        headers: {
          Authorization: localStorage.getItem("token"),
        },
      }).then((res) => {
        // console.log(res.data.message);
        if (res.data.message === "点赞成功") {
          this.data.has_like = true;
          this.data.like_length++;
        } else {
          this.data.has_like = false;
          this.data.like_length--;
        }
      });
    },
  },
  created() {
    this.reloadComment();
    this.loadArticle();
    // 获取评论列表
    commentList(this.$route.params.id).then((res) => {
      console.log(res);
      if (res.data.data.length >= 3) {
        res.data.data.length = 3;
        this.commentList = res.data.data;
      } else {
        this.commentList = res.data.data;
      }
      // this.commentList = res.data.data;
    });
  },
  mounted() {
    this.loadArticle();
    // console.log(this.type);
    // console.log(this.data);
    // console.log(this.$refs);
    // console.log(this.$refs.video);
    // console.log(this.$refs.abc);
    // const play = this.$refs["play"];
    // console.log(play);
    // console.log(this.$refs.video);
    // this.$refs.play.addEventListener("click", () => {
    //   this.$refs.video.play();
    // });
  },
};
</script>

<style lang="less" scoped>
.container {
  padding-bottom: 40 /360 * 100vw;
}
.header {
  padding: 0 10 /360 * 100vw;
  display: flex;
  align-items: center;
  .iconnew {
    flex-grow: 1;
    font-size: 40 /360 * 100vw;
  }
  .follow {
    width: 70 /360 * 100vw;
    height: 30 /360 * 100vw;
    line-height: 30 /360 * 100vw;
    border: 1px solid #ccc;
    text-align: center;
    border-radius: 35 /360 * 100vw;
    // background-color: #ff0000;
    // color: #fff;
    font-size: 14 /360 * 100vw;
  }
}
.article {
  padding: 0 10 /360 * 100vw;
  .title {
    font-weight: 700;
  }
  .info {
    span {
      padding-right: 10 /360 * 100vw;
      font-size: 14 /360 * 100vw;
      color: #999;
    }
  }
  .content {
    font-size: 16 /360 * 100vw;
    /deep/ img {
      width: 100%;
    }
  }
}
.dianzan {
  margin-top: 30 /360 * 100vw;
  padding: 0 10 /360 * 100vw;
  display: flex;
  justify-content: space-evenly;
  & > span {
    padding: 0 10 /360 * 100vw;
    height: 30 /360 * 100vw;
    line-height: 30 /360 * 100vw;
    border: 1px solid #ccc;
    border-radius: 15 /360 * 100vw;
    text-align: center;
    font-size: 14 /360 * 100vw;
    span {
      margin-right: 4 /360 * 100vw;
    }
  }
  .iconweixin {
    color: #00c800;
  }
}
.videoDetails {
  padding: 0 10 /360 * 100vw;
  .header {
    padding: 0;
    display: flex;
    align-items: center;
    .iconnew {
      flex-grow: 1;
      font-size: 40 /360 * 100vw;
    }
  }
  .video {
    margin-bottom: 15 /360 * 100vw;
    position: relative;
    .masking {
      display: flex;
      justify-content: center;
      align-items: center;
      position: absolute;
      top: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.603);
      opacity: 0.6;
      .iconshipin {
        font-size: 100 /360 * 100vw;
        color: rgba(255, 255, 255, 0.8);
      }
    }
  }
  video {
    width: 100%;
  }
  .info {
    display: flex;
    align-items: center;
    .userIcon {
      margin-right: 5 /360 * 100vw;
      width: 25 /360 * 100vw;
      height: 25 /360 * 100vw;
      border-radius: 50%;
      overflow: hidden;
      .userimg {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
    .user {
      flex-grow: 1;
      font-size: 14 /360 * 100vw;
      color: #999;
    }
    .follow {
      padding: 0 20 /360 * 100vw;
      height: 30 /360 * 100vw;
      line-height: 30 /360 * 100vw;
      border: 1px solid #ccc;
      border-radius: 15 /360 * 100vw;
      text-align: center;
      font-size: 14 /360 * 100vw;
    }
  }
  .title {
    margin-top: 20 /360 * 100vw;
  }
}
.unfollow {
  background-color: red;
  color: #fff;
}
.zan {
  color: red;
}
.comment {
  margin-top: 30 /360 * 100vw;
  border-top: 4 /360 * 100vw solid #ccc;
  .title {
    padding: 15 /360 * 100vw;
    text-align: center;
    font-size: 20 /360 * 100vw;
  }
  .bottom {
    margin: 20 /360 * 100vw 0;
    .more {
      text-align: center;
      font-size: 18 /360 * 100vw;
    }
  }
}
.footer {
  padding: 10 /360 * 100vw 15 /360 * 100vw;
  position: fixed;
  display: flex;
  justify-content: space-between;
  align-items: center;
  bottom: 0;
  width: 100%;
  // height: 60px;
  background: #f2f2f2;
  .left {
    padding-left: 20 /360 * 100vw;
    width: 200 /360 * 100vw;
    height: 30 /360 * 100vw;
    background-color: #d7d7d7;
    border-radius: 15 /360 * 100vw;
  }
  .right {
    width: 100 /360 * 100vw;
    display: flex;
    justify-content: space-between;
    align-items: center;
    span {
      font-size: 20 /360 * 100vw;
    }
    .comments {
      position: relative;
      .text {
        position: absolute;
        top: -4px;
        left: 7px;
        font-size: 10 /360 * 100vw;
        background-color: red;
        padding: 0 5 /360 * 100vw;
        border-radius: 8 /360 * 100vw;
        color: #fff;
      }
    }
  }
}
.deactive {
  padding: 10 /360 * 100vw 15 /360 * 100vw;
  position: fixed;
  display: flex;
  align-items: flex-end;
  bottom: 0;
  width: 100%;
  background: #f2f2f2;
  textarea {
    padding: 10 /360 * 100vw;
    width: 250 /360 * 100vw;
    border: 0;
    background-color: #d7d7d7;
    border-radius: 15 /360 * 100vw;
  }
  button {
    margin-left: 10 /360 * 100vw;
    background-color: red;
    padding: 5 /360 * 100vw 20 /360 * 100vw;
    border-radius: 20 /360 * 100vw;
    color: #fff;
  }
}
</style>